page{
	background-color: #f2f2f2;
}
.nav{
	padding: 16rpx 0;
	display: flex;
	justify-content: center;
	.nav-left{
		position: absolute;
		left: 20rpx;
		.icon-zuo{
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}
	}
	.nav-center{
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
	}
}
.top{
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	.top-box{
		text-align: center;
		width: 20%;
		padding:24rpx 0;
		font-size: 26rpx;
		color: #333333;
	}
	.bor{
	
		border-bottom: 2rpx #02a7f0 solid;
	}
}
.spend{
	display: flex;
	// justify-content: space-around;
	flex-wrap: wrap;
	.spend-box{
		
		width: 25%;
		
		margin-top: 24rpx;
		.box-top{
			margin: 0 auto;
			position: relative;
			width: 78rpx;
			height: 76rpx;
			border-radius: 50%;
			border: 2rpx solid #53c1f1;
			.icon-sandian{
				position: absolute;
				right: 0;
				bottom: 0;
				padding:0 4rpx;
				border-radius: 15rpx;
				background-color: #c1e5f5;
				font-size: 30rpx;
				color: #7f7f7f;
			}
		}
		.btm{
			// text-align: center;
			padding-top: 16rpx;
			text-align: center;
			font-size: 24rpx;
			color: #8c8c8c;
		}
	}
}

.botm{
	position: fixed;
	bottom: 0;
	background-color: #fff;
	
	.option{
		background-color: #f2f2f2;
		padding-bottom: 20rpx;
		display: flex;
		.option-box{
			border-radius: 20rpx;
			padding: 10rpx 12rpx;
			margin-left: 26rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			color: #7f7f7f;
			font-size: 24rpx;
			.iconfont{
				font-size: 30rpx;
				color: #7f7f7f;
				padding-right: 14rpx;
			}
		}
	}
	.access{
		.access-box{
			padding: 30rpx 40rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx #eee solid;
		}
		.left{
			font-size: 24rpx;
			color: #cbcbcb;
		}
		.rig{
			color:#292929;
			font-size: 24rpx;
		}
	}
	
	.btm-cen{
		margin-top: 10rpx;
		background-color: #fff;
		padding:0 40rpx;
		.cen-top{
			padding: 28rpx 0;
			display: flex;
			justify-content: space-between;
			.left{
				color: #6f6f6f;
				font-size: 26rpx;
			}
			.iconfont{
				font-size: 32rpx;
				color: #7b7b7b;
			}
			.rig{
				font-size: ;
				color: #7b7b7b;
				font-size: 26rpx;
			}
		}
		.cen-btm{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			.left{
				font-size: 30rpx;
				color: #e13b4b;
			}
			.rig{
				background-color: #f4f4f4;
				border-radius: 20rpx;
				padding-right: 50rpx;
				
				input{
					padding: 30rpx;
					font-size: 26rpx;
				}
				
			}
		}
	}
	
	
	.jian{
		padding: 16rpx 30rpx;
		background-color: #e7f0f4;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		display: flex;
		flex-wrap: wrap;
		// align-content: space-around;
		justify-content: space-around;
		.shu{
			margin-bottom: 15rpx;
			background-color: #fff;
			width: 160rpx;
			height: 94rpx;
			border-radius: 16rpx;
			font-size: 26rpx;
			font-weight: bold;
			text-align: center;
			line-height: 94rpx;
		}
		.blue{
			background-color: #62bde4;
			color: #fff;
		}
		.green{
			background-color: #1ad794;
			color: #fff;
		}
	}
}